* {
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #000;
}
a {
    position: relative;
    width: 400px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 24px;
    color: #fff;
    // 渐变颜色背景
    background: linear-gradient(to right, #03a9f4, #f441a5, #ffea3b, #09a8f4);
    background-size: 400%;
    border-radius: 50px;
    // 在a标签前面又套了一个，相当于什么呢，相当于复制了一份，只不过不用在html中显示结构
    &::before {
        content: '';
        position: absolute;
        top: -5px;                                        
        left: -5px;
        bottom: -5px;
        right: -5px;
        background: linear-gradient(to right, #03a9f4, #f441a5, #ffea3b, #09a8f4);
        background-size: 400%;
        border-radius: 50px;
        /* 位于按钮之下 */
        z-index: -1;
        // 设置模糊度，显示发光效果
        filter: blur(20px);
    }

    &:hover {                                
        // 动画：名称 时间 infinite无限次播放
        animation: streamer 8s infinite;
        &::before {
            animation: streamer 8s infinite;
        }
    }
}

@keyframes streamer {
    100% {
        background-position: -400% 0;
    }
}
